<template>
  <div>
    <el-button
      type="primary"
      plain
      size="small"
      icon="el-icon-plus"
      style="float: left; margin-left: 20px"
      @click="show"
      >新增</el-button
    >
    <el-input
      style="width: 200px; float: left; margin-left: 10px"
      size="small"
      placeholder="请输入角色名称"
      v-model="roleName"
    />
    <el-input
      style="width: 200px; float: left; margin-left: 10px"
      size="small"
      placeholder="请输入角色中文名称"
      v-model="roleNameZh"
    />
    <el-button
      type="primary"
      icon="el-icon-search"
      style="float: left; margin-left: 10px"
      size="small"
      @click="initRole"
      >搜索</el-button
    >
    <el-button
      style="float: left"
      icon="el-icon-refresh"
      size="small"
      @click="clearInput"
      >重置</el-button
    >
    <el-collapse
      v-model="activeName"
      style="float: left; width: 98%; margin-top: 10px; margin-left: 20px"
      accordion
      @change="changeData"
    >
      <el-collapse-item
        v-for="(item, index) in positions"
        :key="item.id"
        :title="item.roleNameZh"
        :name="item.id"
      >
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ item.roleName }}</span>
            <el-button
              style="float: right; padding: 3px 0; color: #ff0000"
              type="text"
              icon="el-icon-delete"
              @click="deleteRole(item)"
            ></el-button>
          </div>
          <div>
            <el-tree
              show-checkbox
              :data="menus"
              :props="defaultProps"
              :key="index"
              ref="tree"
              :default-checked-keys="selectedMenus"
              node-key="id"
            ></el-tree>
            <div style="display: flex; justify-content: flex-end">
              <el-button size="mini" @click="cancelUpdate">取消修改</el-button>
              <el-button
                size="mini"
                type="primary"
                @click="updateMenu(item.id, index)"
                >确认修改</el-button
              >
            </div>
          </div>
        </el-card>
      </el-collapse-item>
    </el-collapse>
    <el-pagination
      style="float: right; margin-top: 10px"
      background
      class="pageBar"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 8]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <el-dialog title="添加角色" :visible.sync="dialogVisible" width="30%">
      <el-input
        style="margin-bottom: 30px"
        placeholder="请输入角色英文名"
        v-model="role.roleName"
      >
        <template slot="prepend">角色英文名</template>
      </el-input>
      <el-input
        style="margin-bottom: 30px"
        placeholder="请输入角色中文名"
        v-model="role.roleNameZh"
      >
        <template slot="prepend">角色中文名</template>
      </el-input>
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="addRole">确 定</el-button>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      roleName: "",
      roleNameZh: "",
      currentPage: 1,
      pageSize: 5,
      total: 0,
      activeName: -1,
      selectedMenus: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      positions: [],
      role: { roleName: "", roleNameZh: "" },
      dialogVisible: false,
      menus: [],
    };
  },
  created() {
    this.initRole();
  },
  methods: {
    cancelUpdate() {
      this.activeName = -1;
    },
    updateMenu(rid, index) {
      let selectedKeys = this.$refs.tree[index].getCheckedKeys(true);
      this.$put("permission/" + rid + "?mids=" + selectedKeys).then((res) => {
        if (res.code == 200) {
          this.activeName = -1;
        }
      });
    },
    show() {
      this.role = {};
      this.dialogVisible = true;
    },
    clearInput() {
      location.reload();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.initRole();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.initRole();
    },
    initMenus() {
      this.$get("permission/menu/list").then((res) => {
        if (res.code == 200 && res.data) {
          this.menus = res.data;
        }
      });
    },
    changeData(rid) {
      if (rid) {
        this.initMenus();
        this.initSelectedMenus(rid);
      }
    },
    initSelectedMenus(rid) {
      this.$get("permission/menu/role/" + rid).then((res) => {
        if (res.code == 200 && res.data) {
          this.selectedMenus = res.data;
        }
      });
    },
    deleteRole(role) {
      this.$confirm(
        '此操作将永久删除"' + role.roleNameZh + '", 是否继续?',
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        this.$delete("role/" + role.id).then((res) => {
          if (res.code == 200) {
            this.initRole();
          }
        });
      });
    },
    addRole() {
      if (
        this.role.roleName != null &&
        this.role.roleName.trim() != "" &&
        this.role.roleNameZh != null &&
        this.role.roleNameZh.trim() != ""
      ) {
        this.$post("role/", this.role).then((res) => {
          if (res.code == 200) {
            this.initRole();
            this.dialogVisible = false;
          }
        });
      } else {
        this.$message.error("请填写全部参数");
      }
    },
    initRole() {
      this.$get(
        "role/" +
          this.currentPage +
          "/" +
          this.pageSize +
          "?roleName=" +
          this.roleName +
          "&roleNameZh=" +
          this.roleNameZh
      ).then((res) => {
        if (res.code == 200 && res.data) {
          this.positions = res.data.records;
          this.total = res.data.total;
        }
      });
    },
  },
};
</script>

<style>
</style>